<script lang="ts" setup>
import { reactive, ref } from 'vue'

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([
  {
    type: '定制个性化',
    projectNo: 'gxyz20231212',
    projectName: '国轩高科2023年年度报告',
    analysisType: '可视化',
  },
]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
})

const getList = async () => {
  loading.value = true
  try {
    // const data = await DefinitionApi.getProcessDefinitionPage(queryParams)
    // list.value = data.list
    // total.value = data.total
  } finally {
    loading.value = false
  }
}

const formatNo = (val) => {
  const { pageNo, pageSize } = queryParams
  return (pageNo - 1) * pageSize + val + 1
}
</script>
<template>
  <div class="analysis-results-container">
    <div class="common-w-box">
      <div class="cnb">
        <div class="title">分析结果交付</div>
        <el-table
          :data="list"
          :loading="loading"
          style="width: 100%"
          class="common-custom-table"
        >
          <el-table-column prop="No" label="序号" width="60">
            <template #default="{ $index }">
              {{ formatNo($index) }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="项目类型" />
          <el-table-column prop="projectNo" label="项目编号" />
          <el-table-column
            prop="projectName"
            label="项目名称"
            show-overflow-tooltip
          />
          <el-table-column prop="analysisType" label="分析类型" />
          <el-table-column
            prop="analysisType"
            label="结果报告"
            width="100"
            align="center"
          >
            <template #default>
              <el-button type="success">预览下载</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="analysisType"
            label="原始数据"
            width="100"
            align="center"
          >
            <template #default>
              <el-button type="warning">下载</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="analysisType"
            label="结果交付"
            width="100"
            align="center"
          >
            <template #default>
              <el-button type="warning">下载</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="analysisType"
            label="可视化"
            width="100"
            align="center"
          >
            <template #default>
              <el-button type="primary">可视化</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.analysis-results-container {
  margin: 16px 0;

  .cnb {
    padding: 25px;
    background: #fff;

    .title {
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 500;
      line-height: 20px;
    }
  }
}
</style>
